<template>
	<div class="container" v-loading="listData.loading">
		<p v-if="!listData.loading && listData.list<1">暂无数据</p>
		<div class="box" v-for="item in listData.list" :key="item.id" @click="itemClickEvent(item.im_account)">
			<img src="@/assets/avatar.png">
			<div class="info">
				<p class="name">{{item.name}}</p>
				<p class="status" v-if="item.online">在线</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				listData:{
					loading:false,
					list:[]
				}
			}
		},
		props:['chat_id'],
		created() {
			this.getChangeList();
		},
		methods:{
			getChangeList(){
				this.listData.loading = true;
				this.$http.post("/api/root/kefu/changeList",{
					chat_id:this.chat_id
				}).then(res=>{
					if(res.code==1){
						this.listData.list = res.data.list
					}else{
						this.$message(res.msg)
					}
				}).catch(err=>{
					
				}).finally(r=>{
					this.listData.loading = false;
				})
			},
			itemClickEvent(im_account){
				this.$confirm('确认转换客服？').then(_=> {
					this.listData.loading = true;
					this.$http.post("/api/root/kefu/changeKefu",{
						chat_id:this.chat_id,
						new_account:im_account
					}).then(res=>{
						this.$message(res.msg)
						this.$emit('close')
					}).catch(err=>{
						
					}).finally(r=>{
						this.listData.loading = false;
					})
				})
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.container{
		.box{
			display: flex;
			margin-bottom: 10px;
			padding: 10px 30px;
			cursor: pointer;
			&:hover{
				background-color: #f5f5f5;
			}
			&>img{
				width: 58px;
				height: 58px;
				margin-right: 18px;
			}
			.info{
				flex: 1;
				.name{
					font-size: 20px;
					color: #333;
				}
				.status{
					font-size: 16px;
					color: #33DA98;
				}
			}
		}
	}
</style>
